<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
  <meta name="format-detection"content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <title>微校日记</title>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/modernizr.2.5.3.min.js"></script>
  <link rel="stylesheet" type="text/css" href="css/basic.css"/>
</head>
<body>

  <div class="flipbook-viewport" style="display:none;">
      <div class="container">
        <div class="flipbook">
			  <div style="background:url(images/0.png) center top no-repeat;background-size:100% 100%;">
        </div>
        
              <div style="background:url(images/1.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div style="background:url(images/2.png) center top no-repeat;background-size:100% 100%">
              </div>
		          <div style="background:url(images/3.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/4.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/5.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/6.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/7.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/8.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div id="fth" style="background:url(images/9.png) center top no-repeat;background-size:100% 100%">
              </div>
              <div>
                <iframe src="join.html" style="height:100%; width:100%"></iframe>
              </div>
              
       </div>
  </div>


  <script type="text/javascript">
      $(function progressbar(){
        var w = $(".graph").width();
        $(".flipbook-viewport").show();
      });
      //屏蔽ios下上下弹性
      $(window).on('scroll.elasticity', function (e) {
          e.preventDefault();
      }).on('touchmove.elasticity', function (e) {
          e.preventDefault();
      });
      function loadApp() {
          var w=$(window).width();
          var h=$(window).height();
          $('.flipboox').width(w).height(h);
        
          $('.flipbook').turn({
                  // Width
                  width:w,
                  // Height
                  height:h,
                  // Elevation
                  elevation: 50,
                  display :'single',
                  // Enable gradients
                  gradients: true,
                  // Auto center this flipbook
                  autoCenter: true
          });
      }
      yepnope({
          test : Modernizr.csstransforms,
          yep: ['js/turn.js'],
          complete: loadApp
      });
</script>

</body>
</html>
